<template>
  <div>
    <div class="contaner">
      <div
        class="contaner_first"
        v-for="(item, index) in listleft"
        :key="index"
      >
        <div class="contaner_first_a">
          <van-image fit="contain" width="172" :src="item.pic" />
          <div class="contaner_first_div">
            <p>{{ item.title }}</p>
          </div>
          <div class="contanter_once_div">
            <div class="contanter_name">
              <p>￥</p>
              <span>{{ item.detail }}</span>
              <p>起</p>
            </div>
            <div class="contanter_firstname">
              <p>{{ item.base }}</p>
              <span id="now">分</span>
            </div>
          </div>
        </div>
      </div>

      <div class="contaner_last" v-for="item in listright" :key="item.id">
        <div class="contaner_last_a">
          <van-image fit="contain" width="172" :src="item.pic" />
          <div class="contaner_last_div">
            <p>{{ item.title }}</p>
          </div>
          <div class="contanter_twin_div">
            <div class="contanter_ranname">
              <p>￥</p>
              <span>{{ item.detail }}</span>
              <p>起</p>
            </div>
            <div class="contanter_twinname">
              <p>{{ item.base }}</p>
              <span id="sp">分</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          pic: require("../../assets/img/2b8d96c9-295e-4166-8866-3d551b114d3b_201604211753_500_350.jpg"),
          title:
            "【时尚精品M秀】新加坡市6日4晚自由行（直飞+4晚克拉码头地区时尚M Social酒店+含双早）",
          detail: "605",
          base: "5.0",
        },
        {
          id: 2,
          pic: require("../../assets/img/5eb667a1-35a4-48c8-aff6-f83936f9244b_202104161726_500_350.jpg"),
          title:
            "【泰北玫瑰】上海直飞清迈蓝庙+大象训练营+塔佩门+宁曼路艺术街5日4晚纯玩团●优选品质酒店+泰式点心DIY+泰装体验+放水灯祈福",
          detail: "712",
          base: "6.0",
        },
        {
          id: 3,
          pic: require("../../assets/img/8062a3d7-8ce9-48af-95f2-965ea4ed8bf1_202104301048_500_350.jpg"),
          title: "【精彩宜昌】清江画廊 三峡大坝2日1晚动车往返●纯玩0购物",
          detail: "513",
          base: "8.0",
        },
        {
          id: 4,
          pic: require("../../assets/img/8c8efcc3-0d4f-4623-a9c0-9c9eb9c26aad_202102221258_500_350.png"),
          title: "【精彩宜昌】清江画廊 三峡大坝2日1晚动车往返●纯玩0购物",
          detail: "613",
          base: "8.0",
        },
        {
          id: 5,
          pic: require("../../assets/img/b84f32c3-1b93-4c77-960c-ef0d2fc6cea3_202002181306_500_350.jpg"),
          title:
            "【性价比高】长白山4日3晚自由行●宿万达智选假日/悦华酒店（含双早+日场滑雪票+汉拿山温泉票+限时水乐园+当地接送机）",
          detail: "825",
          base: "6.8",
        },
        {
          id: 6,
          pic: require("../../assets/img/2b8d96c9-295e-4166-8866-3d551b114d3b_201604211753_500_350.jpg"),
          title:
            "【时尚精品M秀】新加坡市6日4晚自由行（直飞+4晚克拉码头地区时尚M Social酒店+含双早）",
          detail: "605",
          base: "5.0",
        },
        {
          id: 7,
          pic: require("../../assets/img/5eb667a1-35a4-48c8-aff6-f83936f9244b_202104161726_500_350.jpg"),
          title:
            "【泰北玫瑰】上海直飞清迈蓝庙+大象训练营+塔佩门+宁曼路艺术街5日4晚纯玩团●优选品质酒店+泰式点心DIY+泰装体验+放水灯祈福",
          detail: "712",
          base: "6.0",
        },
        {
          id: 8,
          pic: require("../../assets/img/8062a3d7-8ce9-48af-95f2-965ea4ed8bf1_202104301048_500_350.jpg"),
          title: "【精彩宜昌】清江画廊 三峡大坝2日1晚动车往返●纯玩0购物",
          detail: "513",
          base: "8.0",
        },
        {
          id: 9,
          pic: require("../../assets/img/8c8efcc3-0d4f-4623-a9c0-9c9eb9c26aad_202102221258_500_350.png"),
          title: "【精彩宜昌】清江画廊 三峡大坝2日1晚动车往返●纯玩0购物",
          detail: "613",
          base: "8.0",
        },
        {
          id: 10,
          pic: require("../../assets/img/b84f32c3-1b93-4c77-960c-ef0d2fc6cea3_202002181306_500_350.jpg"),
          title:
            "【性价比高】长白山4日3晚自由行●宿万达智选假日/悦华酒店（含双早+日场滑雪票+汉拿山温泉票+限时水乐园+当地接送机）",
          detail: "825",
          base: "6.8",
        },
        {
          id: 11,
          pic: require("../../assets/img/b84f32c3-1b93-4c77-960c-ef0d2fc6cea3_202002181306_500_350.jpg"),
          title:
            "【性价比高】长白山4日3晚自由行●宿万达智选假日/悦华酒店（含双早+日场滑雪票+汉拿山温泉票+限时水乐园+当地接送机）",
          detail: "825",
          base: "6.8",
        },
      ],
      listleft: [],
      listright: [],
    };
  },
  methods: {
    infinite() {
      this.list.forEach((item, index) => {
        if (index % 2 == 0) {
          this.listleft.push(item);
        } else {
          this.listright.push(item);
        }
      });
    },
  },
  mounted() {
    this.infinite();
  },
};
</script>

<style lang="scss" scoped>
.contaner {
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .contaner_first {
    overflow: hidden;
    width: 175px;
    margin-bottom: 10px;
    .contaner_first_a {
      background-color: #fff;
      padding-bottom: 10px;
      border-radius: 7px;
      ::v-deep(.van-image__img) {
        border-radius: 7px 7px 0 0;
      }
      .contaner_first_div {
        margin: 5px 0;
        padding: 0 5px;
        p {
          font-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
      .contanter_once_div {
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        .contanter_name {
          width: 54px;
          height: 18px;
          color: red;
          display: flex;
          justify-content: flex-start;
          p {
            font-size: 12px;
            padding: 2px 0 0 2px;
          }
          span {
            margin-left: 3px;
            font-size: 16px;
            font-weight: bold;
          }
          p {
            font-size: 12px;
          }
        }
        .contanter_firstname {
          width: 28px;
          height: 16px;
          display: flex;
          justify-content: flex-start;
          margin-right: 5px;
          p {
            font-size: 12px;
            color: #6f6f6f;
            line-height: 16px;
          }
          #now {
            font-size: 12px;
            color: #6f6f6f;
            display: block;
            line-height: 16px;
          }
        }
      }
    }
  }

  .contaner_last {
    overflow: hidden;
    width: 175px;
    margin-bottom: 10px;
    .contaner_last_a {
      background-color: #fff;
      padding-bottom: 10px;
      border-radius: 7px;
      ::v-deep(.van-image__img) {
        border-radius: 7px 7px 0 0;
      }
      .contaner_last_div {
        margin: 5px 0;
        padding: 0 5px;
        p {
          font-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
      .contanter_twin_div {
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        .contanter_ranname {
          width: 54px;
          height: 18px;
          color: red;
          display: flex;
          justify-content: flex-start;
          p {
            font-size: 12px;
            padding: 2px 0 0 2px;
          }
          span {
            margin-left: 3px;
            font-size: 16px;
            font-weight: bold;
          }
          p {
            font-size: 12px;
          }
        }
        .contanter_twinname {
          width: 28px;
          height: 16px;
          display: flex;
          justify-content: flex-start;
          margin-right: 5px;
          p {
            font-size: 12px;
            color: #6f6f6f;
            line-height: 16px;
          }
          #sp {
            font-size: 12px;
            color: #6f6f6f;
            display: block;
            line-height: 16px;
          }
        }
      }
    }
  }
}
</style>
